
<template>
    <div class= "header">
      <ul class= "leftData">
        <li class="data">
           <img class= "dataImg" :src= "windData.url" alt="">
           <div>
             <p class= "upData">{{windData.temperature}}</p>
             <p class= "downData" >{{windData.windDrection}}</p>
           </div>     
        </li>
        <li class="data">
           <img class= "dataImg" :src= "PMData.url" alt="">
           <div>
             <p class= "upData">{{PMData.value}} <span class="unit">{{PMData.unit}}</span></p>
             <p class= "downData"> {{PMData.equivalent}}</p>
           </div>     
        </li>
        <li class="data">
           <img class= "dataImg" :src= "PM2Data.url" alt="">
           <div>
             <p class= "upData">{{PM2Data.value}} <span class="unit">{{PMData.unit}}</span></p>
             <p class= "downData">{{PM2Data.equivalent}}</p>
           </div>     
        </li>
      </ul>
      <ul class= "rightData">
         <li class="data">
           <img  class= "dataImg timeImg" :src= "timeData.url" alt="">
           <div>
             <p class= "upData timeUpData">{{timeData.time}}</p>
             <p class= "downData plagiataFont" style= "width:100px;">{{timeData.date}}</p>
           </div>     
        </li>
        <li class="data">
           <img  class= "dataImg temperatureImg" :src= "temperatureData.url" alt="">
           <div>
             <p class= "upData">{{temperatureData.currentTemperature}}</p>
             <p class= "downData plagiataFont">{{temperatureData.temperatureRange}}</p>
           </div>     
        </li>
        <li class="data">
           <img  class= "dataImg" :src= "humidityData.url" alt="">
           <div>
             <p class= "upData">{{humidityData.currentHumidity}}</p>
             <p class= "downData">{{humidityData.humidityLevel}}</p>
           </div>     
        </li>
      </ul>
      <div class= "theme">{{theme}}</div>
    </div>
</template>
<script>
import bus from '../../eventBus'
export default {
    name: 'mapTitle',
    data(){
        return{
            //风向数据
            windData:{
                url: require('../../assets/wind.png'),
                temperature: '19°C',
                windDrection: '东南风'
            },
            //PM值数据
            PMData:{
                url: require('../../assets/PM.png'),
                value:'35',//值
                unit: 'μg/m³',//单位
                equivalent: 'PM2.5'//当量
            },
            //PM10数据
            PM2Data:{
                url: require('../../assets/PM10.png'),
                value:'35',//值
                unit: 'μg/m³',//单位
                equivalent: 'PM10'//当量
            },
            //时间数据
            timeData:{
                url: require('../../assets/weather.png'),
                time : '12:48:55',
                date : '2020-05-13'
            },
            //温度数据
            temperatureData:{
                url: require('../../assets/temperature.png'),
                currentTemperature: '19°C',
                temperatureRange: '17°C~25°C'
            },
            //湿度数据
            humidityData:{
                url: require('../../assets/humidity.png'),
                currentHumidity: '76%',
                humidityLevel: '正常'
            },
            theme:'环保设施',
        }
    },
    created(){
      let _this =this;
      bus.$on('getTheme',(val)=>{
        val(_this.theme);
      })
      bus.$on('initTheme',(theme)=>{
        _this.theme = theme;
      });
    },
    mounted(){
        setInterval(() => {
            var myDate = new Date();
            let year = myDate.getFullYear();
            let month = (myDate.getMonth() + 1).toString().padStart(2, '0');
            let day = myDate.getDate().toString().padStart(2, '0');
            let hours = myDate.getHours().toString().padStart(2, '0');
            let minutes = myDate.getMinutes().toString().padStart(2, '0');
            let seconds = myDate.getSeconds().toString().padStart(2, '0');
            this.timeData.time = hours+':'+minutes+':'+seconds;
            this.timeData.date = year+'-'+month+'-'+day;
        }, 1000);
    },
    methods:{
        init(theme){
            this.theme = theme;
        },
        //向后台请求，刷新数据
        RefreshData(){
            
        }
    }
}
</script>

<style scoped>
  @font-face {
    font-family: 'Plagiata';
    src : url('../../font/Plagiata.otf');
   }

   .plagiataFont{
     font-family: 'Plagiata';
   }

  .header{
    width: 100%;
    height: 80px;
    background-image: url('../../assets/titleBackground.png');
    background-size: 100% 100%;    
  }

  .theme{
    height: 70px;
    line-height: 70px;
    color: #fff;
    font-size: 31px;
    font-weight: bold;
    font-family: 'Microsoft YaHei';
  }

  .leftData{
    float:left;
    height: 57.5px;
    margin: 0;
    padding: 0 0 0 17px;
  }

  .rightData{
    float:right;
    height: 57.5px;
    margin: 0;
    padding: 0;
  }

  .data{
    height: 57.5px;  
    float: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: 'Plagiata';
    color: #fff;
  }


  .data:nth-last-child(n+2):after{
      content: "";
      display: inline-block;
      width: 1px;
      height: 26px;
      margin: 0 10px 0 10px;
      background-color: #d7dce6;
  }

   .dataImg{
    height: 30px;
    width: 30px;
  }
  /* 温度的图标 */
  .temperatureImg{
    width: 23px;
    height: 33px;
  }
  /* 时间的图标 */
  .timeImg{
    width: 44px;
    height: 34px;
  }

  .upData{
    height:18px;
    margin: 0 10px 0 10px;  
    font-size: 22px;
    line-height: 18px;
  }

  .downData{
    width: 70px;
    height: 18px;
    margin: 0 10px 0 10px;  
    font-size: 14px;
    line-height: 18px;
    font-family:'MicrosoftYaHei'
  }

  .timeUpData{
    width: 100px;
    text-align:center;
  }
  
  .unit{
    font-size: 12px;
  }
</style>